<!DOCTYPE html>
<html>

<!DOCTYPE html>
<head>
	<meta charset="utf-8" />
	<title>死而复生-汉化</title>
	<!--
    	作者：winsonzhao
    	时间：2020-03-27
    	参考：https://engaging-data.com/will-money-last-retire-early/
    		https://engaging-data.com/pages/scripts/deadandbroke/RBoD-r2.html#
    	描述：dead and broke 死而复生-汉化
    -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
	<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
	<!-- <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> -->
	<script src="https://cdn.staticfile.org/jqueryui/1.12.1/jquery-ui.min.js"></script>
	<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/bootstrap-slider.js"></script> -->
	<script src="https://cdn.staticfile.org/bootstrap-slider/10.0.0/bootstrap-slider.min.js"></script>
	<!-- <script src="https://engaging-data.com/pages/scripts/arrayfunctions.js"></script> -->
	<script src="arrayfunctions.js"></script>
	<!-- <script src="https://engaging-data.com/pages/scripts/annmarketdata.js"></script> -->
	<script src="annmarketdata.js"></script>
	<!-- <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> -->
	<script src="plotly-latest.min.js"></script>

	<script src="RBoD-r2.js"></script>
	<script src="survivalrates.js"></script>
	<link rel="stylesheet" href="main.css">
</head>

<body onload="calcandplot();">

	<div id="calculator">
		<div class="container" id="top">
			<div class="row-no-padding">
				
				<div class="col-6">
					<div class="form-group">
						<label for="spending"><a href="#" data-toggle="popover" data-html="true" data-trigger="hover"
								data-placement="bottom"
								data-content="这是你退休后每年要花的钱。">支出/年</a>
						</label>
						<input type="text" name="spending" class="inputbox" id="annualspending" autocomplete="off" value="$40,000" onchange="calcandplot();">
					</div>
					<div class="form-group">
						<label for="saving">
							<a href="#" data-toggle="popover" data-html="true" data-trigger="hover"
								data-placement="bottom"
								data-content="这是你在退休期间积攒下来并期望靠它生活的钱。">本金</a>
						</label>
						<input type="text" name=spending class="inputbox" id="totalsavings" autocomplete="off" value="$1,000,000" onchange="calcandplot();">
					</div>
				</div>
				
				<div class="col-6">
					<div class="form-group">
						<label for="age">
							<a href="#" data-toggle="popover" data-html="true" data-trigger="hover"
								data-placement="bottom" data-content="你期望退休的年龄。">退休年龄</a>
						</label>
						<input type="text" class="inputbox" name="age" id="retireage" autocomplete="off" value=40 onchange="calcandplot();">
					</div>

					<div class="form-group">
						<label for="yrs">
							<a href="#" data-toggle="popover" data-html="true" data-trigger="hover" data-placement="bottom"
								data-content="你期望退休的年数。">截至退休年数</a>
						</label>
						<input type="text" class="inputbox" name="yrs" id="cyclelength" autocomplete="off" value=50 onchange="calcandplot();">
					</div>
				</div>
				
				<div class="col-6">
					<div class="form-group">
						<label for="stock">
							<a href="#" data-toggle="popover" data-html="true" data-trigger="hover" data-placement="bottom"
								data-content="输入目标投资组合中股票的全部百分比。股票、债券和现金分配的总和应增加到100%。在此计算中，资产将每年重新平衡到指定的分配。">
								股票 %</a>
						</label>
						<input type="text" name="stock" class="inputbox" id="stockpct" autocomplete="off" value=80 onchange="checkallocationinputs();">
					</div>
					<div class="form-group">
						<label for="bond">
							<a href="#" data-toggle="popover" data-html="true" data-trigger="hover" data-placement="bottom"
								data-content="输入目标投资组合中固定利率资产（如债券）的整数百分比。股票、债券和现金分配的总和应增加到100%。在此计算中，资产将每年重新平衡到指定的分配。">
								债券 %</a>
						</label>
						<input type="text" name="bond" class="inputbox" id="bondpct" autocomplete="off" value=18 onchange="checkallocationinputs();">
					</div>

					<div class="form-group">
						<label for="cash">
							<a href="#" data-toggle="popover" data-html="true" data-trigger="hover" data-placement="bottom"
								data-content="输入目标投资组合中现金的整数百分比。股票、债券和现金分配的总和应增加到100%。在此计算中，资产将每年重新平衡到指定的分配。">
								现金 %</a>
						</label>
						<input type="text" name="cash" class="inputbox" id="cashpct" autocomplete="off" value=2 onchange="checkallocationinputs();">
					</div>
				</div>
				
				<div class="col-6">
					<div class="form-group">
						<label for="tax">
							<a href="#" data-toggle="popover" data-html="true" data-trigger="hover" data-placement="bottom"
								data-content="平均所得税率（%）。这只适用于你每年花费的金额。注意，这不是你的税级边际税率。">
								平均税率</a></label>
						<input type="text" class="inputbox" class="form-control" name="tax" id="taxrate" autocomplete="off" value=0% onchange="calcandplot();">
							%<span class="spacer1"></span>
					</div>

					<div class="form-group">
						<label for="fee">
							<a href="#" data-toggle="popover" data-html="true" data-trigger="hover" data-placement="bottom"
								data-content="股票和债券平均投资费用">
								投资费</a>
						</label>
						<input type="text" class="inputbox" name="fee" id="invfees" autocomplete="off" value=0.3 onchange="calcandplot();">
							%
					</div>
				</div>
				
				<div class="col-6">
					<div class="form-group">
						<label for="income">
							<a href="#" data-toggle="popover" data-html="true" data-trigger="hover" data-placement="bottom"
								data-content="这是你期望从社保、养老金或其他收入中获得的以当前美元计算的年度福利金额（该计划将此金额膨胀为未来美元）。您可以输入由分号（；）分隔的多个收入流">
								额外收入</a>
						</label>
						<input type="text" class="inputbox" id="incomevalue" name="income" autocomplete="off" value=$0 onchange="calcandplot();">
					</div>
				</div>
				
				<div class="col-6">
					<div class="form-group">
						<label for="incomestart">
							<a href="#" data-toggle="popover" data-html="true" data-trigger="hover" data-placement="bottom"
								data-content="收入开始的年龄。如果您输入了多个收入流，请确保您也输入了相同的起始年龄，所有起始年龄都用分号（；）分隔。">
								起始年龄</a>
						</label>
						<input type="text" class="inputbox" id="incomestart" name="incomestart" autocomplete="off" value=50 onchange="calcandplot();">
					</div>

					<div class="form-group">
						<label for="incomeend">
							<a href="#" data-toggle="popover" data-html="true" data-trigger="hover" data-placement="bottom"
								data-content="收入结束的年龄。如果您输入了多个收入流，请确保您也输入了相同数量的结束年龄，所有这些都用分号（；）分隔。">
								结束年龄</a>
						</label>
						<input type="text" class="inputbox" id="incomeend" name="incomeend" autocomplete="off" value=70 onchange="calcandplot();">
					</div>
				</div>
				<div class="col-6">
					<div class="form-group">
						<label for="expense">
							<a href="#" data-toggle="popover" data-html="true" data-trigger="hover" data-placement="bottom"
								data-content="这是一项支出（如大学或抵押贷款）的年度额外支出金额（以当前美元计）（该计划将把该金额膨胀为未来美元）。您可以输入用分号（；）分隔的多项费用">
								额外开支</a>
						</label>
						<input type="text" class="inputbox" name="expense" id="expensevalue" autocomplete="off" value=$0 onchange="calcandplot();">
					</div>
				</div>
				
				<div class="col-6">
					<div class="form-group">
						<label for="expensestart">
							<a href="#" data-toggle="popover" data-html="true" data-trigger="hover" data-placement="bottom"
								data-content="费用开始老化。如果您输入了多个费用，请确保输入的起始年龄数相同，并且都用分号（；）分隔。">
								开始年龄</a>
						</label>
						<input type="text" class="inputbox" name="expensestart" id="expensestart" autocomplete="off" value=50 onchange="calcandplot();">
					</div>
					<div class="form-group">
						<label for="expensesend">
							<a href="#" data-toggle="popover" data-html="true" data-trigger="hover" data-placement="bottom"
								data-content="费用结束的年龄。如果您输入了多个费用，请确保您也输入了相同数量的结束年龄，所有这些都用分号（；）分隔。">
								结束年龄</a>
						</label>
						<input type="text" class="inputbox" id="expenseend" name="expenseend" autocomplete="off" value=70 onchange="calcandplot();">
					</div>
				</div>
				
				<div class="col-6">
					<div class="form-group">
						<label for="inflradio">
							<a href="#" data-toggle="popover" data-html="true" data-trigger="hover" data-placement="bottom"
								data-content="通货膨胀切换：<br><b>名义值</b>显示每年因通货膨胀而价值变化的美元（通常价值随着时间的推移而下降，因此今天的名义美元价值超过未来的1美元）。<br><b>通货膨胀调整后的</b>，也称为<i>real</i>或<i>current</i>显示其价值因通货膨胀而调整的美元（去掉通货膨胀，今天的通货膨胀调整后的美元等于将来的美元）">
								显示通货膨胀: </a>
						</label>
						<input id="nominal" type="radio" name="inflradio" onclick="calcandplot();">
						<span class="choice">名义上 </span>
						<input id="real" type="radio" name="inflradio" checked onclick="calcandplot();">
						<span class="choice">实际上.</span>
					</div>
				</div>
				
				<div class="col-6">
					<div class="form-group">
						<label for="spendflex">
							<a href="#" data-toggle="popover" data-html="true" data-trigger="hover" data-placement="bottom"
								data-content="当投资组合余额低于初始余额时，可以减少的年度支出百分比。这只适用于当你的投资组合余额低于你的初始余额（在通货膨胀调整的基础上）。"
								id="spendflex">支出弹性 %</a>
						</label>
						<input type="text" class="inputbox" name="flexpct" id="flexpct" autocomplete="off" value=0 onchange="calcandplot();">
					</div>
					<div class="form-group">
						</span><label for="sex">性别:</label>
						<input id="male" type="radio" name="sex" value="M" checked onclick="calcandplot();">
						<span class="choice">男</span>
						<input id="female" type="radio" name="sex" value="F" onclick="calcandplot();">
						<span class="choice">女</span>
					</div>
				</div>
				
				<div class="col-12">
					<div class="wedges">
						<label><b>切换按钮:</b> </label>
					</div>
					<div class="wedges">
						<span id="death">
							<a href="#" class="wedgetoggle" data-toggle="popover" data-html="true" data-trigger="hover" data-placement="bottom"
								data-content="单击可切换图形以显示/隐藏死亡数据。">
								<span class="choice">死亡</span>
							</a>
							<input type="checkbox" class="check wedgetoggle" id="showdeath" checked=checked value=0 onclick="calcandplot();">
								&nbsp;
						</span>
						<span id="below">
							<a href="#" class="wedgetoggle" data-toggle="popover" data-html="true" data-trigger="hover" data-placement="bottom"
								data-content="单击此项可切换图表以聚合/分离低于初始起始值（但高于零）的余额的成功概率。">
								<span class="choice">低于初始值（但高于零）余额</span>
							</a>
							<input class="check wedgetoggle" type="checkbox" id="belowstart" checked=checked value=0 onclick="calcandplot();">
								&nbsp;
						</span>
					</div>
					<div class="wedges">
						<span id="above">
							<a href="#" class="wedgetoggle" data-toggle="popover" data-html="true" data-trigger="hover" data-placement="bottom"
								data-content="单击此项可切换图表以聚合/分离余额的成功概率，这些余额是初始起始值的两倍以上。">
								<span class="choice">余额是初始起始值的两倍以上</span>
							</a>
							<input class="check wedgetoggle" type="checkbox" id="twoXstart" checked=checked value=1 onclick="calcandplot();">
								&nbsp;
						</span>
						<span id="high">
							<a href="#" class="wedgetoggle" data-toggle="popover" data-html="true" data-trigger="hover" data-placement="bottom"
								data-content="单击此项可切换图表以聚合/分离大于初始起始值五倍的余额的成功概率。">
								<span class="choice">大于初始起始值五倍的余额</span>
							</a>
							<input class="check wedgetoggle" type="checkbox" id="fiveXstart" checked=checked value=1 onclick="calcandplot();">
								&nbsp;
						</span>
					</div>
				</div>
			</div>
		</div>
		<div class="col-12" id="graph" style="background-color:#eeeeee; border-radius:10px;">
			<div id='myDiv'></div>
			<span id="errormsg"></span>
		</div>
		
	
	</div>
		<div id="bottom" style="background: #EEEEEE;padding-left: 1em;">
			<div>
				<label><b>Spending/yr（支出/年）:</b> </label>
				<p>
					This is the amount of money that you expect to spend annually when retired.
					<br>这是你退休后每年要花的钱。
				</p>
			</div>
			<div>
				<label><b>Savings（本金）:</b> </label>
				<p>
					This is the amount of money that you have saved up and expect to live off of during retirement.
					<br>这是你在退休期间积攒下来并期望靠它生活的钱。
				</p>
			</div>
			<div>
				<label><b>Retire Age（退休年龄）:</b> </label>
				<p>
					Age that you expect to retire.
					<br>你期望退休的年龄
				</p>
			</div>
			<div>
				<label><b>Retirement Yrs（退休年数）:</b> </label>
				<p>
					Number of years that you expect to be retired.
					<br>你期望退休的年数
				</p>
			</div>
			<div>
				<label><b>Spending Flexibility（支出弹性）%:</b> </label>
				<p>
					Percentage of your annual spending that you could reduce when portfolio balance is lower than your initial balance. This only applies when your portfolio balance is lower than your initial balance (on an inflation-adjusted basis).
					<br>当投资组合余额低于初始余额时，可以减少的年度支出百分比。这只适用于当你的投资组合余额低于你的初始余额（在通货膨胀调整的基础上）。
				</p>
			</div>
			<div>
				<label><b>Stock （股票）%:</b> </label>
				<p>
					Enter the whole number percentage of stocks in your target portfolio. The sum of stock, bond and cash allocations should add to 100%.  In this calculation, assets will be rebalanced to the specified allocation annually.
					<br>输入目标投资组合中股票的全部百分比。股票、债券和现金分配的总和应增加到100%。在此计算中，资产将每年重新平衡到指定的分配。
				</p>
			</div>
			<div>
				<label><b>Bond（债券）%:</b> </label>
				<p>
					Enter the whole number percentage of fixed rate assets like bonds in your target portfolio. The sum of stock, bond and cash allocations should add to 100%.  In this calculation, assets will be rebalanced to the specified allocation annually.
					<br>输入目标投资组合中固定利率资产（如债券）的整数百分比。股票、债券和现金分配的总和应增加到100%。在此计算中，资产将每年重新平衡到指定的分配。
				</p>
			</div>
			<div>
				<label><b>Cash（现金）%:</b> </label>
				<p>
					Enter the whole number percentage of cash in your target portfolio. The sum of stock, bond and cash allocations should add to 100%.  In this calculation, assets will be rebalanced to the specified allocation annually.
					<br>输入目标投资组合中现金的整数百分比。股票、债券和现金分配的总和应增加到100%。在此计算中，资产将每年重新平衡到指定的分配。
				</p>
			</div>
			<div>
				<label><b>Avg Tax Rate（平均税率）:</b> </label>
				<p>
					Average Income Tax Rate (%).  This is applied only to the amount you spend each year.  Note that this is not your tax bracket marginal tax rate.
					<br>平均所得税率（%）。这只适用于你每年花费的金额。注意，这不是你的税级边际税率。
				</p>
			</div>
			<div>
				<label><b>Investment Fees（投资费）:</b> </label>
				<p>
					Average Investment Fees on Stock and Bonds (%)
					<br>股票和债券平均投资费用
				</p>
			</div>
			<div>
				<label><b>Show inflation（显示通货膨胀）:</b> </label>
				<p>
					Inflation toggle: <br><b>Nominal</b> shows dollars whose value each year changes due to inflation (typically the value goes down over time so that 1 nominal dollar today is worth more than 1 dollar in the future). <br><b>Inflation adjusted</b>, also known as <i>real</i> or <i>current</i> shows dollars whose value is adjusted for inflation (inflation is removed so that 1 inflation adjusted dollar today is equal to 1 dollar in the future.) 
					<br>通货膨胀切换：<br><b>名义值</b>显示每年因通货膨胀而价值变化的美元（通常价值随着时间的推移而下降，因此今天的名义美元价值超过未来的1美元）。<br><b>通货膨胀调整后的</b>，也称为<i>real</i>或<i>current</i>显示其价值因通货膨胀而调整的美元（去掉通货膨胀，今天的通货膨胀调整后的美元等于将来的美元）
				</p>
				<label>Nominal（名义上） </label>
				<label>Inflation Adj.（实际上） </label>
			</div>
			<div>
				<label><b>Extra income（额外收入）:</b> </label>
				<p>
					This is the annual benefit amount you expect from social security, pension or other income in current dollars (the program will inflate this amount to future dollars).  You may enter multiple income streams separated by a semi-colon (;)
					<br>这是你期望从社保、养老金或其他收入中获得的以当前美元计算的年度福利金额（该计划将此金额膨胀为未来美元）。您可以输入由分号（；）分隔的多个收入流
				</p>
				<label>Start Age（起始年龄）: </label>
				<p>
					Age that income starts.  If you have multiple income streams entered, make sure you also enter the same number of starting ages all separated by a semi-colon (;).
					<br>收入开始的年龄。如果您输入了多个收入流，请确保您也输入了相同的起始年龄，所有起始年龄都用分号（；）分隔。
				</p>
				<label>End Age（结束年龄）: </label>
				<p>
					Age that income ends.  If you have multiple income streams entered, make sure you also enter the same number of ending ages all separated by a semi-colon (;).
					<br>收入结束的年龄。如果您输入了多个收入流，请确保您也输入了相同数量的结束年龄，所有这些都用分号（；）分隔。
				</p>
			</div>
			<div>
				<label><b>Extra expense（额外开支）:</b> </label>
				<p>
					This is the annual additional spending amount for an expense (e.g. college or mortgage) in current dollars (the program will inflate this amount to future dollars).  You may enter multiple expenses separated by a semi-colon (;)
					<br>这是一项支出（如大学或抵押贷款）的年度额外支出金额（以当前美元计）（该计划将把该金额膨胀为未来美元）。您可以输入用分号（；）分隔的多项费用
				</p>
				<label>Start Age（起始年龄）: </label>
				<p>
					Age that expense starts.   If you have multiple expenses entered, make sure you also enter the same number of starting ages all separated by a semi-colon (;).
					<br>费用开始老化。如果您输入了多个费用，请确保输入的起始年龄数相同，并且都用分号（；）分隔。
				</p>
				<label>End Age（结束年龄）: </label>
				<p>
					Age that expense ends.   If you have multiple expenses entered, make sure you also enter the same number of ending ages all separated by a semi-colon (;).
					<br>费用结束的年龄。如果您输入了多个费用，请确保您也输入了相同数量的结束年龄，所有这些都用分号（；）分隔。
				</p>
			</div>
			<div>
				<label><b>Toggle wedges（切换按钮）:</b> </label>
				<label>Death（死亡）: </label>
				<p>
					Click to toggle the graph to show/hide the wedge of death.
					<br>单击可切换图形以显示/隐藏死亡数据。
				</p>
				<label>Success (Bal &lt; start)（ 余额  &lt; 起始值 ）: </label>
				<p>
					Click to toggle the graph to aggregate/separate success probabilities for balances below the initial starting value (but above zero).
					<br>单击此项可切换图表以聚合/分离低于初始起始值（但高于零）的余额的成功概率。
				</p>
				<label>Success (Bal > 2x)（ 余额 > 2x起始值 ）: </label>
				<p>
					Click to toggle the graph to aggregate/separate success probabilities for balances that are more than double the initial starting value.
					<br>单击此项可切换图表以聚合/分离余额的成功概率，这些余额是初始起始值的两倍以上。
				</p>
				<label>Success (Bal > 5x)（  余额 > 5x起始值 ）: </label>
				<p>
					Click to toggle the graph to aggregate/separate success probabilities for balances that are more than five times the initial starting value.
					<br>单击此项可切换图表以聚合/分离大于初始起始值五倍的余额的成功概率。
				</p>
			</div>
		</div>
	</div>
	<script>
		$(document).ready(function () {
			$('[data-toggle="popover"]').popover();
		});

	</script>
</body>

</html>